<template>
  <div class="classListContainer">
    <div class="classList-top">
      <div
        class="classListItem"
        v-for="classItem1 in classList.slice(0, 5)"
        :key="classItem1.id"
      >
        <!-- slice方法参数左闭右开 -->
        <img :src="classItem1.imgUrl" />
      </div>
    </div>
    <div class="classList-bottom">
      <div
        class="classListItem"
        v-for="classItem2 in classList.slice(5, 10)"
        :key="classItem2.id"
      >
        <img :src="classItem2.imgUrl" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassList",
  props: ["classList"],
};
</script>

<style scoped lang="less">
.classListContainer {
  width: 3.75rem;
  height: 1.6rem;
  & > div {
    //子元素选择器,不是后代元素,只有第一代儿子
    width: 100%;
    height: 0.8rem;
    display: flex;
    .classListItem {
      width: 20%;
      img {
        width: 0.75rem;
        height: 0.8rem;
      }
    }
  }
}
</style>